<template>
  <ul class="topNav">
    <li>
      <router-link to="/Recommend">推荐音乐</router-link>
    </li>
    <li>
      <router-link to="/hot">热歌榜</router-link>
    </li>
    <li>
      <router-link to="/search">搜索</router-link>
    </li>
  </ul>
</template>

<style lang="less" scoped>
.topNav {
  display: flex;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 99;
  
  background-color: #ffffff;
  border-bottom: 1px solid #ccc;
  li {
    flex: 1;
    line-height: 40px;
      height: 40px;
    text-align: center;
    position: relative;
    a {
      display: inline-block;
      line-height: 40px;
      padding: 0px 5px;
      font-size: 15px;
      color: #333;
      text-decoration: none;
      &.router-link-exact-active {
        color: #dd001b;
        &::after {
          content: "";
          position: absolute;
          bottom: -1px;
          right: 0px;
          left: 0px;
          margin: auto;
          width: 30px;
          height: 2px;
          background-color: #dd001b;
        }
      }
    }
  }
}
</style>